<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/base.css" rel="stylesheet" type="text/css">
    <link href="../css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/paramsTool.js"></script>
    <script src="../js/layer.js"></script>
    <title>充值</title>
</head>
<style type="text/css">
    .swiper-container {width: 100%; height: 100%; margin: 0 auto;  position: relative;  overflow: hidden;  z-index: 1; }

    .swiper-container ul li {
        width: 45%;
        float: left;
        border: 1px solid #dcdcdc;
        margin:20px 0 0px 10px;
        text-align: center;
        height: 50px;
        padding: 18px 0;
        color: #888888;
        font-size: 18px;
    }

    .swiper-container ul li span {
        font-size: 19px;
        color: #444;
        font-weight: 500;
    }

    .phtact {
        background-color: #ea4821;
        color: #fff !important;
    }

    .phtact span{
        color: yellow !important;
    }

    .btnClass{
        margin: 20px auto;
        width: 95%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #ea4821;
        font-size: 20px;
        color: #FFF;
        border-radius: 5px;
    }
    .exptxt{margin-right:10px;}
    .exptxt ol{line-height:1.4; color:#505050; font-weight:bold; font-size:13px;}
    .exptxt ol li{ margin:10px 0 0 25px; list-style-type:decimal;width: 90%; text-align: left;}
</style>
<script type="text/javascript">
    var host = window.location.origin;
    var goodid= 1;
    var openid = getCookie('wxopenid');
    var sid = getCookie('sid');
    if(!openid || !sid){
//        getWxCode();
    }
    $(function(){


        $("#recharge li").click(function() {

            $(this).siblings('li').removeClass('phtact');  // 删除其他兄弟元素的样式

            $(this).addClass('phtact');                    // 添加当前元素的样式

            goodid= $(".phtact").data('goodid');
        });

        $(".btnClass").click(function(){
            openid =  getCookie('wxopenid');
            sid = getCookie('sid');
            $.ajax({
                url: host+ "/pay",
                type: "get",
                async:true,//请求是否异步，默认为异步，这也是ajax重要特性
                dataType:'json',
                headers: {"content-type":"application/json","openid":openid,"goodid":goodid,"sid":sid},
                success:function(data){
                    if(data.code){
                        layer.open({
                            content: data.info
                            ,skin: 'msg'
                            ,time: 1.5 //2秒后自动关闭
                        });
                    }else {
                        if (typeof WeixinJSBridge == "undefined"){
                            if( document.addEventListener ){
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady(data.prepay_id,data._paySignjs,data.nonce_str,data.time_stamp,data.coinNum), false);
                            }else if (document.attachEvent){
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady(data.prepay_id,data._paySignjs,data.nonce_str,data.time_stamp,data.coinNum));
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(data.prepay_id,data._paySignjs,data.nonce_str,data.time_stamp,data.coinNum));
                            }
                        }else{
                            onBridgeReady(data.prepay_id,data._paySignjs,data.nonce_str,data.time_stamp,data.coinNum);
                        }
                    }

                },
                error:function() {
                    layer.open({
                        content: '充值失败!'
                        ,skin: 'msg'
                        ,time: 1.5 //2秒后自动关闭
                    });
                }
            });
        });

        $('#sharePage').click(function () {
            location.href = host+'/view/shareCode.html?referee='+openid;
        });
    });
    function exp(){
        layer.open({
            type: 1,
            title:[
                '会员规则',
                'background-color:#cc3435; color:#fff; font-weight:bold;text-align:center;'
            ],
            content: '<div class="exptxt"><ol><li>会员功能暂不开放</li><li>已付费会员请联系客服,我们将记录并安排退款.</li><li>给大家造成不便深感歉意,对不起!</li></ol></div>',
            style: 'width:80%; height:250px;border:0px solid black; margin:0 auto; border-radius:6px;'
        });
    }
</script>
<body>
<div style="text-align: right; margin: 20px; color: red; font-size: 13px" onclick="exp()">会员规则>></div>
<div class="swiper-container">

    <ul id="recharge">
        <li data-goodid="1" class="phtact">
            <span>初级会员</span><br>售价5.5元
        </li>
        <li data-goodid="2">
            <span>中级会员</span><br>售价10元
        </li>
        <li data-goodid="3">
            <span>高级会员</span><br>售价20元
        </li>
        <li data-goodid="4">
            <span>至尊会员</span><br>售价50元
        </li>
    </ul>
</div>

<div style="width: 80%; font-size: 14px; color: red; text-align: center; margin: 20px 10%;">暂不开放支付功能,请等更新版本.感谢您的理解和支持!</div>
<!--<div class="btnClass">立即支付</div>-->
<!--底部导航--
<div class="spring_bar">
    <a href="index.html">
        <dl class="list">
            <dt class=""><img src="../image/ctb1.png" /></dt>
            <dd>百万微商</dd>
        </dl>
    </a>
    <a href="book.html">
        <dl class="list">
            <dt><img src="../image/ctb2.png" /></dt>
            <dd>在线阅读</dd>
        </dl>
    </a><a href="postCash.html">
    <dl class="list">
        <dt><img src="../image/ctbm.png" /></dt>
        <dd></dd>
    </dl>
</a><a href="recharge.html">
    <dl class="list">
        <dt>
            <img src="../image/ctb3on.png" />
        </dt>
        <dd class="tbon">百万微货</dd>
    </dl> </a>
    <a href="me.html">
        <dl class="list">
            <dt><img src="../image/ctb4.png" /></dt>
            <dd>个人中心</dd>
        </dl>
    </a>
</div>
<!--底部导航end-->
</body>
</html>